<template>
  <div>
    <!-- 页头 -->
    <el-card>
      <el-page-header
        @back="goBack((visibleStatus = 1))"
        :content="
          this.visibleStatus === 1
            ? '双链生鲜供应链平台:产品列表'
            : this.visibleStatus === 3
            ? '更新数据:1/1'
            : this.visibleStatus === 2
            ? '用户中心'
            : '新建一个产品'
        "
      >
      </el-page-header>
    </el-card>

    <!-- 下拉菜单 -->
    <el-card v-show="visibleStatus === 1" style="width: 96%; margin: 20px auto">
      <el-form :inline="true">
        <!-- 计量单位 -->
        <el-form-item label="计量单位:" style="width: 423px">
          <el-select
            style="width: 298px"
            size="small"
            v-model="value"
            filterable
            placeholder="请选择列表中或者输入搜索"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- id -->
        <el-form-item label="ID:" style="width: 423px">
          <el-input
            size="small"
            style="width: 341px"
            v-model="value"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- 查询重置 -->
        <el-button size="small" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <el-button size="small" icon="el-icon-refresh-right">重置</el-button>
        <!-- 下拉菜单 -->
      </el-form>
      <!-- 新建批量删除等 -->
      <el-form>
        <el-button
          size="small"
          icon="el-icon-plus"
          type="primary"
          @click="visibleStatus = 4"
          >新建</el-button
        >
        <el-button size="small" icon="el-icon-edit" type="info" plain disabled
          >批量更新</el-button
        >
        <el-button size="small" icon="el-icon-delete" type="info" plain disabled
          >批量删除</el-button
        >
        <el-button size="small" icon="el-icon-document-delete"
          >导出全部</el-button
        >
      </el-form>
      <!-- 分隔栏 -->
      <div class="kuang">
        <p>一共<span>10000</span>项, 请选择要操作的项来执行更多功能</p>
      </div>

      <!-- 内容区 -->
      <el-table :data="setTime" style="width: 100%">
        <el-table-column type="selection" align="center" width="60px">
        </el-table-column>
        <el-table-column prop="id" sortable label="ID" width="61px">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="66px">
        </el-table-column>
        <el-table-column prop="description" label="描述" width="136px">
        </el-table-column>
        <el-table-column prop="origin" label="产地" width="39px">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="188px">
        </el-table-column>
        <el-table-column prop="brand" label="品牌" width="188px">
        </el-table-column>
        <el-table-column label="图片" width="96px">
          <template v-slot="{ row }">
            <el-image :src="row.picture" type="success"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="计量单位" sortable width="78px">
          <template v-slot="{ row }">
            <el-tag type="success">{{ row.measureUnit.displayName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastUpdateTime"
          label="最后更新时间"
          sortable
          width="99px"
        >
        </el-table-column>
        <el-table-column label="商户" sortable width="100px">
          <template v-slot="{ row }">
            <el-tag type="success">{{ row.merchant.displayName }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="details(row)"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="edit(row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="remove(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页    @size-change="handleSizeChange"-->
      <el-pagination
        layout=" ->,prev, pager, next"
        background
        :total="total"
        :current-page="currentPage"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>

    <!-- 详情 -->
    <Details v-show="visibleStatus === 2"></Details>
    <!-- 编辑 -->
    <Edit v-show="visibleStatus === 3" @goback="goback"></Edit>
    <!-- 新建 -->
    <Thenew v-show="visibleStatus === 4" @getack="getack" @thenew="thenew">
    </Thenew>
  </div>
</template>

<script>
import moment from "moment";
import Details from "./Details";
// 按需引入深拷贝
import cloneDeep from "lodash/cloneDeep";
import Edit from "./Edit";
import Thenew from "./Thenew";
export default {
  name: "From",
  components: {
    Details,
    Edit,
    Thenew,
  },
  data() {
    return {
      visibleStatus: 1,
      options: [
        {
          value: "选项1",
          label: "包(Pack)",
        },
        {
          value: "选项2",
          label: "打(Dozen)",
        },
        {
          value: "选项3",
          label: "千克(Kg)",
        },
        {
          value: "选项4",
          label: "箱(Box)",
        },
      ],
      // 所有数据
      tableData: [],
      // 当前页数据
      productList: [],
      value: "",
      // 每页几条数据
      pagesize: 1,
      // 共显示几页
      total: 9,
      currentPage: 1,
    };
  },
  methods: {
    // 新建
    // getList.name || !getList.brand || !getList.remark
    //  || !getList.origin || !getList.description
    thenew(value) {
      let name = value.name; //名称
      let brand = value.brand; //品牌
      let remark = value.remark; //备注
      let origin = value.origin; //产地
      let description = value.description; //描述
      let time = Date.now(); //获取当前时间戳
      let createTime = moment(time).format("YYYY-MM-DD hh:mm");
      let id = Math.round(Math.random() * 199); //id设置为随机数
      let itemList = {
        id: `M079${id}`,
        lastUpdateTime: createTime,
        name,
        brand,
        remark,
        origin,
        description,
        picture:
          "https://img1.baidu.com/it/u=2455666284,3687695069&fm=26&fmt=auto&gp=0.jpg",
        measureUnit: {
          displayName: "包",
        },
        merchant: {
          displayName: "小链生鲜",
        },
      };
      // 将整理好的数据增加到当前展示的数组中
      this.setTime.unshift(itemList);
      // 返回主页面
      this.visibleStatus = 1;
    },

    // 详情
    details() {
      this.visibleStatus = 2;
    },
    // 编辑
    edit(value) {
      this.visibleStatus = 3;
      let info = cloneDeep(value);
      this.$bus.$emit("edit", info);
    },
    // 编辑也更新完毕给对应的值赋值
    update(row) {
      let { itemName, itemId, itemTion, itemGin, itemMark, itemBrand } = row;
      this.productList = this.productList.map((item) => {
        if (item.id === itemId) {
          item.name = itemName;
          item.description = itemTion;
          item.origin = itemGin;
          item.remark = itemMark;
          item.brand = itemBrand;
        }
        return item;
      });
      this.visibleStatus = 1;
    },
    // 查看
    details(value) {
      this.visibleStatus = 2;
      let form = cloneDeep(value);
      this.$bus.$emit("details", form);
    },

    // 返回首页
    goBack(value) {
      this.visibleStatus = value;
    },
    getack() {
      this.visibleStatus = 1;
    },
    goback() {
      this.visibleStatus = 1;
    },
    // 删除指定品牌
    remove(a) {
      // console.log(a);
      let result = this.productList.filter((item) => {
        return item.id !== a.id;
      });
      this.productList = result;
      // if(this.productList.length ===1){
      //   this.currentPage -=1
      // }
      // this.getproduct()
    },
    // 获取商品列表信息
    async getproduct() {
      let result = await this.$API.product.getproduct();
      // this.tableData = result.product[0].productList
      if (result.code === 200) {
        this.productList = result.product[0].productList;
        this.tableData = result.product;
      }
      // console.log(this.productList);
    },
    // 点击不同也数发请求
    async handleCurrentChange(val) {
      this.currentPage = val;
      let result = await this.$API.product.getproduct();
      this.productList = result.product[val].productList;
    },
    // handleSizeChange(val){
    //   console.log(val);
    // }
  },
  mounted() {
    // 获取数据
    this.getproduct();
    // 接受编辑后传递的新值
    this.$bus.$on("update", this.update);
  },
  // 计算一个时间
  computed: {
    setTime() {
      return this.productList.map((item) => {
        item.lastUpdateTime = moment(item.lastUpdateTime).format(
          "YYYY-MM-DD hh:mm"
        );
        return item;
      });
    },
  },
};
</script>

<style lang='scss'  scoped>
.kuang {
  height: 38px;
  background-color: rgb(230, 247, 255);
  margin: 16px 0;
  border: 1px solid rgb(145, 213, 255);
  border-radius: 5px;
}
p {
  line-height: 38px;
  font-size: 14px;
  padding-left: 20px;
}
span {
  color: #1890ff;
  margin: 0 5px;
}
</style>